<template>
  <view>
    <view class="title">
      <!-- 头部图片 -->
      <view class="title-image">
        <image src="../../static/imag/123.png"></image>
      </view>
      <!-- 签到开始 -->
      <view class="signIn">
        <!-- 头部签到天数跟规则 -->
        <view class="signIn-top">
          <!-- 签到信息 -->
          <view class="signIn-message">
            <view class="signIn-continuous">
              已连续签到4天
            </view>
            <navigator url="../signInRule/signInRule" class="signIn-rule">
              签到规则
            </navigator>
          </view>
          <text style="font-size: 22rpx; color: #888;">听说连续签到的人,会赚更多的钱呢~</text>
        </view>

        <!-- 签到天数 -->
        <view class="signIn-button">
          <!-- 已经签到 -->
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              已签
            </view>
          </view>

          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              5天
            </view>
          </view>
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              6天
            </view>
          </view>
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              7天
            </view>
          </view>
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              8天
            </view>
          </view>
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              9天
            </view>
          </view>
          <view class="signIn-item">
            <view class="signIn-image">
              <image src="../../static/imag/icon_a1.png"></image>
              <text>0.3</text>
            </view>
            <view class="signIn-text">
              10天
            </view>
          </view>

        </view>
      </view>
      <!-- 签到结束 -->
    </view>
    <!-- 每日任务开始 -->
    <view class="task">
      <!-- 任务提示 -->
      <view class="hint">
        <view class="hint-head">
          <!-- 竖线 -->
          <view class="hint-wire">

          </view>
          <view>
            每日任务
          </view>
        </view>
        <text style="color: #888;font-size: 24rpx;">完成后可获得额外奖励</text>
      </view>
      <!-- 广告 -->
      <view class="advertising">
        <!-- 广告图标 -->
        <view class="advertising-left">
          <view class="advertising-logo">
            <image src="../../static/imag/icon_a1.png"></image>
          </view>
          <view class="advertising-content">
            <!-- 看广告视频 积分加5 -->
            <view class="content-top">
              <view style="font-size: 30rpx;font-weight: 700;">
                看广告视频
              </view>
              <view class="content-image">
                <image src="../../static/imag/icon_a1.png"></image>
                <text>+5</text>
              </view>
            </view>
            <!-- 需完成 进度 -->
            <view class="content-butom">
              <view class="">
                需完成
              </view>
              <view class="">

              </view>
            </view>
          </view>
        </view>
        <!-- 去完成按钮 -->
        <view class="advertising-right">
          去完成
        </view>
      </view>
    </view>
    <!-- 每日任务结束 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .title {
    position: relative;

    // 头部图片
    .title-image {
      background-color: #fcbe17;
      height: 276rpx;
      padding: 0 30rpx;
    }

    // 签到
    .signIn {
      width: 690rpx;
      height: 276rpx;
      background-color: #fff;
      border-radius: 16rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      padding: 20rpx;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);

      // 头部签到天数跟规则
      .signIn-top {

        // 签到信息
        .signIn-message {
          display: flex;
          justify-content: space-between;

          .signIn-continuous {
            font-size: 28rpx;
            font-weight: 700;
          }

          .signIn-rule {
            color: #888;
          }
        }
      }

      // 签到天数
      .signIn-button {
        display: flex;
        justify-content: space-between;

        .signIn-item {
          width: 60rpx;

          .signIn-image {
            width: 70rpx;
            height: 120rpx;
            background-color: #e5e2e3;
            // background-color: #fcbe17;
            margin: 9rpx 0;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 10rpx 0;

            image {
              width: 50rpx;
              height: 50rpx;
            }
          }

          .signIn-text {
            text-align: center;
            font-size: 26rpx;
            font-weight: 600;
          }

        }
      }
    }
  }

  // 每日任务开始
  .task {
    margin: 30% 30rpx 0;

    .hint {
      .hint-head {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 10rpx;
      }

      .hint-wire {
        width: 6rpx;
        height: 30rpx;
        background-color: #fcbe17;
        margin-right: 10rpx;
      }
    }

    .advertising {
      margin-top: 20rpx;
      height: 140rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f8f8f8;

      .advertising-left {
        display: flex;

        .advertising-logo {
          width: 88rpx;
          height: 88rpx;
          margin-right: 20rpx;
        }

        .advertising-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .content-top {
            display: flex;

            .content-image {
              width: 100rpx;
              height: 30rpx;
              background-color: #fcbe17;
              margin-left: 10rpx;
              border-radius: 20rpx;
              display: flex;

              image {
                width: 30rpx;
                height: 30rpx;
              }

              text {
                display: block;
                width: 70rpx;
                height: 30rpx;
                text-align: center;
                line-height: 30rpx;
                color: #888;
              }


            }

          }

          .content-butom {}
        }
      }

      .advertising-right {
        width: 140rpx;
        height: 60rpx;
        background-color: #fcbe17;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
        border-radius: 30rpx;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);
      }
    }
  }

  // 每日任务结束
</style>
